<template>
  <div class="bg_white">
    <a-card title="视频会议" style="width: 100%">
      <div slot="extra">
        <a-radio-group
          v-model="tabPosition"
          style="margin: 8px"
          @change="clickOne(event)"
        >
          <a-radio-button value="本周"> 本周 </a-radio-button>
          <a-radio-button value="本月"> 本月 </a-radio-button>
          <a-radio-button value="本年"> 本年 </a-radio-button>
        </a-radio-group>
        <a-range-picker style="width: 300px" @change="onChange" />
      </div>
      <a-row>
        <a-col :span="8">
          <a-row>
            <a-col :span="24">
              <div
                style="
                  color: rgba(23, 26, 29, 0.4);
                  font-weight: 600;
                  font-size: 14px;
                  line-height: 22px;
                  width: 100%;
                "
              >
                <div
                  style="
                    height: 18px;
                    width: 4px;
                    margin-right: 6px;
                    border-radius: 2px;
                    background-color: rgba(23, 26, 29, 0.4);
                    display: inline-block !important;
                    margin-right: 6px;
                    position: relative;
                    top: 3px;
                    border-radius: 2px;
                  "
                ></div>
                <span>总会议数</span>
              </div>
            </a-col>
            <a-col :span="24">
              <a-statistic
                :value="value1"
                class="demo-class"
                style="margin-top: 8px"
              >
                <template #suffix>
                  <span>场</span>
                </template>
              </a-statistic>
              <div style="margin-top: 10px">
                日均会议数 0场
                <a-tooltip
                  placement="topLeft"
                  title="日均会议数 = 总会议数 / 所选时间段天数"
                  arrow-point-at-center
                >
                  <a-icon type="question-circle" />
                </a-tooltip>
              </div>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="8">
          <a-row>
            <a-col :span="24">
              <div
                style="
                  color: rgba(23, 26, 29, 0.4);
                  font-weight: 600;
                  font-size: 14px;
                  line-height: 22px;
                  width: 100%;
                "
              >
                <div
                  style="
                    height: 18px;
                    width: 4px;
                    margin-right: 6px;
                    border-radius: 2px;
                    background-color: rgba(23, 26, 29, 0.4);
                    display: inline-block !important;
                    margin-right: 6px;
                    position: relative;
                    top: 3px;
                    border-radius: 2px;
                  "
                ></div>
                <span>会议总人次</span>
              </div>
            </a-col>
            <a-col :span="24">
              <a-statistic
                :value="value2"
                class="demo-class"
                style="margin-top: 8px"
              >
                <template #suffix>
                  <span>人</span>
                </template>
              </a-statistic>
              <div style="margin-top: 10px">
                日均参会人次 0人
                <a-tooltip
                  placement="topLeft"
                  title="平均参会人次 = 会议总人次 / 总会议数"
                  arrow-point-at-center
                >
                  <a-icon type="question-circle" />
                </a-tooltip>
              </div>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="8">
          <a-row>
            <a-col :span="24">
              <div
                style="
                  color: rgba(23, 26, 29, 0.4);
                  font-weight: 600;
                  font-size: 14px;
                  line-height: 22px;
                  width: 100%;
                "
              >
                <div
                  style="
                    height: 18px;
                    width: 4px;
                    margin-right: 6px;
                    border-radius: 2px;
                    background-color: rgba(23, 26, 29, 0.4);
                    display: inline-block !important;
                    margin-right: 6px;
                    position: relative;
                    top: 3px;
                    border-radius: 2px;
                  "
                ></div>
                <span>会议总时长</span>
              </div>
            </a-col>
            <a-col :span="24">
              <a-statistic
                :value="formattime(value3)"
                class="demo-class"
                style="margin-top: 8px"
              >
                <template #suffix>
                  <span>分钟</span>
                </template>
              </a-statistic>
              <div style="margin-top: 10px">
                平均会议时长 0分钟
                <a-tooltip
                  title="平均会议时长 = 会议总时长 / 总会议数"
                  arrow-point-at-center
                >
                  <a-icon type="question-circle" />
                </a-tooltip>
              </div>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </a-card>
    <a-card style="width: 100%">
      <div slot="extra">
        <div style="display: inline-block; position: absolute; left: 0">
          <a-tabs default-active-key="1" @change="callback" v-model="activeKey">
            <a-tab-pane key="1" tab="总会议数"> </a-tab-pane>
            <a-tab-pane key="2" tab="会议总人次" force-render> </a-tab-pane>
            <a-tab-pane key="3" tab="会议总时长"> </a-tab-pane>
          </a-tabs>
        </div>
        <a-radio-group
          v-model="tabPosition2"
          style="margin: 8px; display: inline-block"
          @change="clickTwo(event)"
        >
          <a-radio-button value="本周"> 本周 </a-radio-button>
          <a-radio-button value="本月"> 本月 </a-radio-button>
          <a-radio-button value="本年"> 本年 </a-radio-button>
        </a-radio-group>
        <a-range-picker style="width: 300px" @change="onChange" />
      </div>

      <!--年月日周切换-->
      <div class="timeMoudle flex justifyContent alignItems">
        <div
          class="mr20"
          v-for="(item, index) in timeData"
          :key="index"
          @click="handleBdTime(index)"
          :class="{ timeStyle: timeIndex == index }"
        >
          {{ item.title }}
        </div>
      </div>

      <!--折线图-->
      <div class="echart" id="insuranceChart" :style="myChartStyle"></div>
    </a-card>

    <a-card style="width: 100%">
      <div slot="extra">
        <div style="display: inline-block; position: absolute; left: 0">
          会议数据分布
        </div>
        <a-radio-group
          v-model="tabPosition3"
          style="margin: 8px; display: inline-block"
          @change="clickThree(event)"
        >
          <a-radio-button value="本周"> 本周 </a-radio-button>
          <a-radio-button value="本月"> 本月 </a-radio-button>
          <a-radio-button value="本年"> 本年 </a-radio-button>
        </a-radio-group>
        <a-range-picker style="width: 300px" @change="onChange" />
      </div>
      <div>
        <a-row>
          <a-col :span="12">
            <div class="echart" id="mychart" :style="myChartStyle"></div>
          </a-col>
          <a-col :span="12">
            <div class="echart" id="mychart2" :style="myChartStyle"></div>
          </a-col>
        </a-row>
      </div>
    </a-card>
  </div>
</template>

<script>
import api from "@/api/application";
import cmeduGateway from "@/api/cmeduGateway";
import * as echarts from "echarts";
import moment from "moment";
export default {
  name: "Demo",
  data() {
    return {
      activeKey: "1",
      tabPosition: "本周",
      tabPosition2: "本周",
      tabPosition3: "本周",
      bdTimeIndex: "2", //默认显示本月数据
      bdScopeTime: "month",
      bdTimeData: [
        { title: "今日", value: "day" },
        { title: "本周", value: "week" },
        { title: "本月", value: "month" },
        { title: "全年", value: "year" },
      ],
      xData: [], //横坐标
      yData: [], //数据
      myChartStyle: { width: "100%", height: "400px" }, //图表样式,

      insuranceChart: null,
      insuranceOption: {},

      inquiryDataCount: [],
      payDataCount: [],
      dataLineX: [],
      myChart: {},
      myChart2: {},
      pieData: [
        {
          value: 5,
          name: "0-15分钟",
        },
        {
          value: 0,
          name: "15-30分钟",
        },
        {
          value: 0,
          name: "30-45分钟",
        },
        {
          value: 0,
          name: "45-60分钟",
        },
        {
          value: 0,
          name: "60分钟以上",
        },
      ],
      pieData2: [
        {
          value: 3,
          name: "1人",
        },
        {
          value: 40,
          name: "2人",
        },
        {
          value: 0,
          name: "3-10人",
        },
        {
          value: 0,
          name: "11-25人",
        },
        {
          value: 0,
          name: "26-50人",
        },
        {
          value: 0,
          name: "50人以上",
        },
      ],
      pieName: [],
      pieName2: [],

      resList: [],
      unionid: "iPQgqbmYWviitSnf65C0CpyQiEiE",
      startTime: "",
      endTime: "",
      startTime2: "",
      endTime2: "",
      startTime3: "",
      endTime3: "",
      value1: 0,
      value2: 0,
      value3: 0,
      name: "",
    };
  },
  created() {},
  beforeMount() {},
  mounted() {
    this.timeSlotChange("1", this.tabPosition);
    this.timeSlotChange("2", this.tabPosition2);
    this.inntDatacount();

    this.initContent();

    this.initDate(); //数据初始化

    this.timeSlotChange("3", this.tabPosition3);
    this.initDate2(); //数据初始化
  },
  methods: {
    callback() {
      this.initContent();
    },
    async initContent() {
      let userid = this.unionid;
      let startTime = this.startTime2;
      let endTime = this.endTime2;
      let data =
        "userid=" +
        userid +
        "&&startTime=" +
        startTime +
        "&&endTime=" +
        endTime +
        "";
      let res = await api.getMeetingByData(data);
      this.xData = [];
      this.yData = [];
      if (res.data.errcode == 0) {
        for (let index = 0; index < res.data.data.length; index++) {
          this.xData.push(res.data.data[index].timeLevel);
          if (this.activeKey == 1) {
            this.name = "单位（场）";
            this.yData.push(res.data.data[index].count);
          }
          if (this.activeKey == 2) {
            this.name = "单位（人）";
            this.yData.push(res.data.data[index].sum_attendNum);
          }

          if (this.activeKey == 3) {
            this.name = "单位（分钟）";
            this.yData.push(
              this.formattime(res.data.data[index].sum_confDuration)
            );
          }
        }
      }
      this.initEcharts0();
    },
    initEcharts0() {
      // 基本柱状图
      const option = {
        xAxis: {
          data: this.xData,
        },
        yAxis: {
          type: "value",
          // ----------------------通过name属性加单位，也可以通过nameTextStyle设置对应单位文字样式-----------------------
          name: this.name,
          nameTextStyle: {
            color: "#aaa",
            nameLocation: "start",
          },
        },
        series: [
          {
            type: "bar", //形状为柱状图
            data: this.yData,
            showBackground: true,
            itemStyle: {
              color: echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#df8f19" },
                { offset: 0.5, color: "#f5b238" },
                { offset: 1, color: "#efe164" },
              ]),
              normal: {
                label: {
                  show: true,
                  // rotate: 70, // 旋转70度
                  position: "top", // 在上方显示
                  // distance: 20, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
                  // verticalAlign: "middle",
                  textStyle: {
                    // 数值样式
                    color: "#000",
                    fontSize: 10,
                  },
                },
              },
            },
          },
        ],
        tooltip: {
          //提示框组件
          trigger: "item", //item数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
      };
      const myChart = echarts.init(document.getElementById("insuranceChart"));
      myChart.setOption(option); //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    async inntDatacount() {
      let data2 = {
        language: "zh_CN",
        userid: localStorage.getItem("dingtalk_user_id"),
      };
      let res2 = await cmeduGateway.getUserDetail(data2);
      if (res2.data.errcode == 0) {
        this.unionid = res2.data.result.unionid;
      }

      let userid = this.unionid;
      let startTime = this.startTime;
      let endTime = this.endTime;
      let data =
        "userid=" +
        userid +
        "&&startTime=" +
        startTime +
        "&&endTime=" +
        endTime +
        "";
      api
        .getMeetingsData(data)
        .then((result) => {
          this.value1 = 0;
          this.value2 = 0;
          this.value3 = 0;
          if (result.data.errcode == 0) {
            this.resList = result.data.data;
          }
          if (this.resList[0] && this.resList[0].NumCount) {
            this.value1 = this.resList[0].NumCount;
          }
          if (this.resList[1] && this.resList[1].NumCount) {
            this.value2 = this.resList[1].NumCount;
          }
          if (this.resList[2] && this.resList[2].NumCount) {
            this.value3 = this.resList[2].NumCount;
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    formattime(time) {
      var time_s = time / 1000;
      var minute = Math.floor(time_s / 60);
      return minute;
    },
    moment,
    onChange(dates, dateStrings) {
      // console.log("From: ", dates[0], ", to: ", dates[1]);
      // console.log("From: ", dateStrings[0], ", to: ", dateStrings[1]);
      this.startTime = new Date(dateStrings[0]).getTime();
      this.endTime = new Date(dateStrings[1]).getTime();
      this.inntDatacount();
    },
    async initDate() {
      let userid = this.unionid;
      let startTime = this.startTime3;
      let endTime = this.endTime3;
      let data =
        "userid=" +
        userid +
        "&&startTime=" +
        startTime +
        "&&endTime=" +
        endTime +
        "";
      let res = await api.getMeetingBetweenTime(data);
      if (res.data.errcode == 0) {
        this.pieData = res.data.data;
        for (let i = 0; i < this.pieData.length; i++) {
          this.pieName[i] = this.pieData[i].name;
        }
      }
      this.initEcharts();
    },
    //获取本周日期
    timeSlotChange(index, val) {
      let startTime, endTime;
      let now = new Date(); //当前日期
      let nowDayOfWeek = now.getDay(); //今天本周的第几天
      let nowDay = now.getDate(); //当前日
      let nowMonth = now.getMonth(); //当前月
      let nowYear = now.getFullYear(); //当前年
      let jd = Math.ceil((nowMonth + 1) / 3);
      switch (val) {
        case "本周":
          startTime = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek);
          endTime = new Date(nowYear, nowMonth, nowDay + 6 - nowDayOfWeek);
          break;
        case "本月":
          startTime = new Date(nowYear, nowMonth, 1);
          endTime = new Date(nowYear, nowMonth + 1, 0);
          break;
        case "本季度":
          startTime = new Date(nowYear, (jd - 1) * 3, 1);
          endTime = new Date(nowYear, jd * 3, 0);
          break;
        case "本年":
          startTime = new Date(nowYear, 0, 1);
          endTime = new Date(nowYear, 11, 31);
          break;
      }
      if (index == "1") {
        this.startTime = this.formatdatetime(startTime);
        this.endTime = this.formatdatetime(endTime);
      } else if (index == "2") {
        this.startTime2 = this.formatdatetime(startTime);
        this.endTime2 = this.formatdatetime(endTime);
      } else if (index == "3") {
        this.startTime3 = this.formatdatetime(startTime);
        this.endTime3 = this.formatdatetime(endTime);
      }
    },

    clickOne(e) {
      this.timeSlotChange("1", this.tabPosition);
      this.inntDatacount();
    },

    clickTwo(e) {
      this.timeSlotChange("2", this.tabPosition2);
      this.initContent();
    },
    clickThree(e) {
      this.timeSlotChange("3", this.tabPosition3);
      this.initDate();
    },
    //实现方法
    formatdatetime(date) {
      let result = new Date(date).getTime();
      return result;
    },

    async initDate2() {
      let userid = this.unionid;
      let startTime = this.startTime3;
      let endTime = this.endTime3;
      let data =
        "userid=" +
        userid +
        "&&startTime=" +
        startTime +
        "&&endTime=" +
        endTime +
        "";
      let res = await api.getMeetingBetweenPerson(data);
      if (res.data.errcode == 0) {
        this.pieData2 = res.data.data;
        for (let i = 0; i < this.pieData2.length; i++) {
          this.pieName2[i] = this.pieData2[i].name;
        }
      }
      this.initEcharts2();
    },

    initEcharts() {
      // 饼图
      const option = {
        legend: {
          // 图例
          data: this.pieName,
          right: "6%",
          top: "30%",
          orient: "vertical",
        },
        title: {
          // 设置饼图标题，位置设为顶部居中
          text: "时长分布",
          top: "0%",
          left: "center",
        },
        series: [
          {
            type: "pie",
            label: {
              show: true,
              formatter: "{b} : {c} ({d}%)", // b代表名称，c代表对应值，d代表百分比
            },
            radius: "40%", //饼图半径
            data: this.pieData,
          },
        ],
      };
      // console.log(this.seriesData);
      const optionFree = {
        xAxis: {},
        yAxis: {},
        series: [
          {
            data: this.seriesData,
            type: "line",
            smooth: true,
          },
        ],
      };
      this.myChart = echarts.init(document.getElementById("mychart"));
      this.myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },
    initEcharts2() {
      // 饼图
      const option = {
        legend: {
          // 图例
          data: this.pieName2,
          right: "6%",
          top: "30%",
          orient: "vertical",
        },
        title: {
          // 设置饼图标题，位置设为顶部居中
          text: "人数分布",
          top: "0%",
          left: "center",
        },
        series: [
          {
            type: "pie",
            label: {
              show: true,
              formatter: "{b} : {c} ({d}%)", // b代表名称，c代表对应值，d代表百分比
            },
            radius: "40%", //饼图半径
            data: this.pieData2,
          },
        ],
      };
      // console.log(this.seriesData);
      const optionFree = {
        xAxis: {},
        yAxis: {},
        series: [
          {
            data: this.seriesData,
            type: "line",
            smooth: true,
          },
        ],
      };
      this.myChart2 = echarts.init(document.getElementById("mychart2"));
      this.myChart2.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.myChart2.resize();
      });
    },
  },
};
</script>

<style scoped>
.timeStyle {
  color: #ff4d4f !important;;
}

#insuranceChart {
  background-color: #fff;
}
</style>
